<template>
  <div>
    <!-- 顶部显示收货地址 -->
    <div class="cart-top">
      <div class="receive">
        <div class="name">收货人: {{ address.userName }}</div>
        <div class="phonen-number">{{ address.telNumber }}</div>
      </div>
      <div class="address">收货地址: {{ allAddress }}</div>
      <img
        src="../../../static/images/cart_border@2x.png"
        class="address-bar"
        mode="aspectFill"
      />
    </div>
    <!-- 商品列表 -->
    <div class="list-title">商品列表</div>
    <div class="ware-list">
      <div
        class="ware-item"
        v-for="(value, name, index) in getOrderData"
        :key="index"
      >
        <!-- 左侧按钮checkbox -->
        <div class="choice-button">
          <icon
            @click="singleCheck(value.goods_id)"
            type="success"
            size="14"
            :color="value.checked ? 'red' : '#eee'"
          />
        </div>
        <!-- 右侧商品信息 -->
        <div class="ware-content">
          <!-- 左侧图片 -->
          <navigator class="ware-image">
            <img mode="aspectFill" :src="value.goods_small_logo" />
          </navigator>
          <!-- 右侧商品信息 -->
          <div class="ware-info">
            <!-- 商品名称 -->
            <navigator class="ware-title">
              {{ value.goods_name }}
            </navigator>
            <!-- 商品价格和数量变更 -->
            <div class="ware-info-btm">
              <!-- 商品价格 -->
              <div class="ware-price">
                <span>￥</span>
                {{ value.goods_price }}
              </div>
              <!-- 数量变更 -->
              <div class="number">x{{ value.num }}</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 总价和支付按钮 -->
    <div class="all-price">
      合计：<span>￥{{ allPrice }}</span>
      <button type="primary" @click="payHandle">支付</button>
    </div>
  </div>
</template>

<script>
import request from "../../utils/request.js";
export default {
  data() {
    return {
      orderNum: "",
      address: {},
      cart: {},
    };
  },
  methods: {
    payHandle() {
      // 进行支付
      // 1.调用我们的后台接口进行支付
      // 2.调用微信API进行支付
      // 3.支付成功后删除购物车对应的商品

      // 1.调用我们的后台接口进行支付
      let token = mpvue.getStorageSync("mytoken");
      request(
        "my/orders/req_unifiedorder",
        { order_number: this.orderNum },
        "post",
        { Authorization: token }
      ).then((res) => {
        // console.log(res) 中有微信支付需要的pay数据
        // 服务器返回的数据用于调用微信API进行支付
        // 2.调用微信API进行支付
        let payParam = res.data.message.pay;
        mpvue.requestPayment({
          // 对象的展开操作
          ...payParam,
          success(res) {
            // 支付成功后触发
            // 1. 删除支付成功的商品
            for (let key in this.cart) {
              if (this.cart[key].checked) {
                // 支付过的商品，需要从购物车删除
                delete this.cart[key];
              }
            }
            // 删除cart数据后，重新把剩余数据写回到缓存中
            mpvue.setStorageSync("mycart", this.cart);
            // 2. 重新跳转到购物车页面
            mpvue.navigateBack({
              delta: 1,
            });
          },
          fail(res) {
            console.log(payError);
          },
        });
      });
    },
  },
  computed: {
    allPrice() {
      // 计算购物车所有商品的总价格
      // 单价 X 数量 再进行累加
      let sum = 0;
      for (let key in this.getOrderData) {
        let p = this.getOrderData[key];
        if (p.checked) {
          // 选中的商品
          // 单价 X 数量 再进行累加
          sum += p.goods_price * p.num;
        }
      }
      return sum;
    },
    getOrderData() {
      // 从购物车中获取选中的商品
      let list = {};
      for (let key in this.cart) {
        // 一件商品的数据
        let p = this.cart[key];
        if (p.checked) {
          // 选中的商品
          list[key] = p;
        }
      }
      return list;
    },
    allAddress() {
      // 生成完整的地址信息
      if (this.address === null) {
        return "";
      }
      let { provinceName, cityName, countyName, detailInfo } = this.address;
      return `${provinceName}${cityName}${countyName}${detailInfo}`;
    },
  },
  onLoad(param) {
    // 获取订单号
    this.orderNum = param.orderNum;
    // 获取收货地址
    this.address = mpvue.getStorageSync("myaddress");
    // 获取购物车数据
    this.cart = mpvue.getStorageSync("mycart");
  },
};
</script>

<style lang="less" scoped>
@import "./main.less";
</style>
